import React from 'react';
import ReactDOM from 'react-dom';

import { Slider, Modal, Alert, message } from 'antd';

import FlyBall from './../../components/FlyBall'


import './index.scss';


const style = {
	height: '70vh',
	float: "left"
};

const  g = 10, v_speed = 20;

const UPWARD = true, defaultSpeed = 10;

const LANDSCAPE = 'landscape'; //这里是横屏
const PORTRAIT = 'portrait'; //这里是竖屏

const GOAL = [70,80];
const BALLSTARGET = { sx: 560, sy: 170 };

let touchSi,randomSpeed=10,result=[], touchTime=0;





class Ball extends React.Component {
	constructor(...args){
		super(...args);
	}
	render(){
		return(
			<div className={`ball ${this.props.active ? 'active' : ''} `} style={{ left: this.props.x , top: this.props.y }}></div>
			)
	}
}

class Frame extends React.Component{
	constructor(...args){
		super(...args);
	}
	render(){
		return(
			<div className="ball-frame"></div>
			)
	}
}



class Arm extends React.Component {
	constructor(...args){
		super(...args);
	}
	render(){
		return(
			<div className={`arm-wrap ${this.props.active ? 'active' : ''} `}></div>
			)
	}
}














export default class Shoot extends React.Component {
	constructor(props){
		super(props);
		this.state={
			ballsTarget: { },
			// ballsTarget: { sx: 560, sy: 170 },
			ballsPosition: { sx: 120, sy: 380},
		    // 抛物小球
		    balls: [],


		    goal: GOAL,
		    timePoint: 0,
		    speed: randomSpeed,
		    Upward: UPWARD,
		    orientation: PORTRAIT,
		    active: false,
		}
		
	}

	componentWillMount (){
		document.oncontextmenu = function (e) { return false; }
	}

	componentDidMount (){
		var updateOrientation = ()=>{
			var orientation = window.orientation;
			switch(orientation){
				case 90:
				case -90:
				this.setState({
						orientation: LANDSCAPE, //这里是横屏
					})
				break;
				default:
				this.setState({
						orientation: PORTRAIT, //这里是竖屏
					})
				break;
			}

			//html根据不同的旋转状态，加上不同的class，横屏加上landscape，竖屏
			//加上portrait
			// document.body.parentNode.setAttribute('class',orientation);
		};

		// 每次旋转，调用这个事件。
		window.addEventListener('orientationchange',updateOrientation,false);

		// 事件的初始化
		updateOrientation();
	}

	touchStart(ev){
		randomSpeed = defaultSpeed+parseInt(Math.random()*5);
		touchTime = 0;
		this.setState({
			timePoint: 0,
			active: false,
			Upward: UPWARD,
			speed: randomSpeed,

			x: '10vw',
			y: '90vh',
		});

		touchSi = setInterval(()=>{
			this.setState({
				Upward: (this.state.timePoint == 0 || this.state.timePoint == 100) ? !this.state.Upward : this.state.Upward
			});
			this.setState({
				timePoint: !this.state.Upward ? ++this.state.timePoint : --this.state.timePoint,
			});


			touchTime += randomSpeed
		},randomSpeed)

	}


	touchEnd(e){
		var state = this.state, _goal = state.goal;
		this.setState({
			ballsTarget: (state.timePoint > _goal[0] && state.timePoint < _goal[1]) ? BALLSTARGET : { sx: (BALLSTARGET.sx-state.timePoint), sy: (BALLSTARGET.sy-state.timePoint) }
		})
		this.showFlyBall(e);
		
		clearInterval(touchSi);
		// this.setState({
		//  active: true
		// })
		/*

		var ball = document.getElementsByClassName("ball")[0];
		this.getBallPosition(ball,60,100);
		return;
		if(touchTime < 200){
			message.error('触碰时间太短');
			return;
		}
		if(  this.state.timePoint > this.state.goal[0] && this.state.timePoint < this.state.goal[1]){
			this.setState({
				active: true
			})
			message.success('This is a success message');
		}else{
			message.error('This is an error message');
		}*/
	}

	getBallPosition(rect,radian,step){


	}

	handler(){
		return false;
	}

	render(){
		return(
			<div className="shoot-wrap">

				<div className="games-wrap hide" 
				onClick={ this.handler.bind(this) }
				onTouchStart={ this.touchStart.bind(this) }
				// onMouseDown={  this.touchStart.bind(this) } 
				onTouchEnd={ this.touchEnd.bind(this) } 
				// onMouseUp={  this.touchEnd.bind(this) }
				>
					<p>{ this.state.timePoint }</p>
					<p>{ this.state.speed }</p>
				
					<Arm active={this.state.active}></Arm>
					<Ball active={this.state.active} x={this.state.x+'px' } y={this.state.y+'px'} ref="ball"/>
					<Frame/>
				</div>

				<div className="slider-wrap">
					<div className="goal" style={{ height: (this.state.goal[1] - this.state.goal[0])+"%", top: (100 - this.state.goal[1])+"%" }}>
						<span>{ this.state.goal[1] }</span>
						<span>{ this.state.goal[0] }</span>
					</div>
					<Slider style={style} vertical disabled value={ this.state.timePoint } />
				</div>

				<div className="games-wrap"
				onTouchStart={ this.touchStart.bind(this) }
				// onMouseDown={  this.touchStart.bind(this) } 
				onTouchEnd={ this.touchEnd.bind(this) } 
				// onClick={ this.touchEnd.bind(this) } 
				>
					<FlyBall
					changeFlyBallCount={this.changeFlyBallCount.bind(this)}
					balls={this.state.balls}
					target={this.state.ballsTarget}
					curvature={0.003}
					speed={100}/>
					<div className='target' style={{ transform: `translate(${this.state.ballsTarget.sx-20}px, ${this.state.ballsTarget.sy}px)` }} />
				</div>
				<div className="slider-wrap">
					<div className="goal" style={{ height: (this.state.goal[1] - this.state.goal[0])+"%", top: (100 - this.state.goal[1])+"%" }}>
						<span>{ this.state.goal[1] }</span>
						<span>{ this.state.goal[0] }</span>
					</div>
					<Slider style={style} vertical disabled value={ this.state.timePoint } />
				</div>


			</div>
		)   
	}


	changeFlyBallCount(id) {
		console.log(`ball: ${id} hidden`)
		let state = this.state
		let balls = state.balls
		for (let i=0; i<balls.length; i++) {
			if(balls[i].id === id) {
				balls.splice(i, 1)
				break
			}
		}
		this.setState({
			balls: Object.assign([], state.balls)
		})
		console.log(this.state.balls)
	}

	showFlyBall(e) {

		let state = this.state
	    // console.log('eee:', e.pageY, e.pageX, this.props.source);
	    let balls = this.state.balls
	    let len = balls.length

	    let newball ={
	    	id: new Date().getTime(),
	    	position: {
	    		x: state.ballsPosition.sx,
	    		y: state.ballsPosition.sy
	    		// x: e.pageX,
	    		// y: e.pageY
	    	}
	    }
	    balls.push(newball)
	    this.setState({
	    	balls: Object.assign([], balls),
	    })
	}
}